<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form size="small" :inline="true" @submit.native.prevent>
      <!-- <el-form-item label="设备编号">
        <el-select
          v-model="searchForm.deviceCode"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in deviceNos"
            :key="item.value"
            :label="item.label1"
            :value="item.value"
          >
            <span style="float: left">{{ item.label1 }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.label2
            }}</span>
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-radio-group
          v-model="searchForm.status"
          size="mini"
          @change="getInfo"
        >
          <el-radio-button :label="0">待审批</el-radio-button>
          <el-radio-button :label="1">审批历史</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="handleSearch('搜索')"
          class="button"
          plain
          >搜索</el-button
        >
        <el-button
          type="info"
          size="mini"
          @click="handleReset"
          class="button"
          plain
          >重置</el-button
        >
      </el-form-item> -->
    </el-form>
    <!-- 表 -->
    <el-table
      v-loading="loading"
      :data="tableList"
      border
      :max-height="THeight"
    >
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="设备编号" align="center" prop="deviceCode" />
      <el-table-column label="设备名称" align="center" prop="deviceName" />
      <el-table-column label="线别名称" align="center" prop="lineId" />
      <el-table-column label="所属课别" align="center" prop="dept" />
      <el-table-column label="异常项目" align="center" prop="project" />
      <el-table-column label="异常原因" align="center" prop="reason" />
      <el-table-column
        label="发生时间"
        align="center"
        prop="dateTime"
        width="145"
      />
      <el-table-column label="处置详情" align="center">
        <el-table-column label="解锁工号" align="center" prop="user" />
        <el-table-column label="解锁姓名" align="center" prop="userName" />
        <el-table-column label="解锁部门" align="center" prop="userDept" />
        <el-table-column label="处置类型" align="center" prop="actionType1" />
        <el-table-column label="处置方式" align="center" prop="actionType2" />
        <el-table-column
          label="处置时间"
          align="center"
          prop="actionTime"
          width="145"
        />
      </el-table-column>
      <el-table-column label="审批状态" align="center" prop="reViewState"
        ><template slot-scope="scope">
          <el-tag
            :type="scope.row.reViewState === 0 ? 'warning' : 'success'"
            disable-transitions
            >{{ scope.row.reViewState == 0 ? "审批中" : "完成" }}</el-tag
          >
        </template></el-table-column
      >
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleAprove(scope.row)">{{
            scope.row.reViewState === 0 ? "审批" : "查看"
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  reqGetReViewMainIng,
  reqGetReViewMainEd,
} from "@/api/newApi/OCAP/index.js";
export default {
  data() {
    return {
      searchForm: { status: 0 },
      THeight: null,
      loading: false,
      tableList: [], //表数据
    };
  },
  mounted() {
    this.THeight = (78 * window.innerHeight) / 100;
    this.getInfo();
  },
  computed: {
    ...mapGetters(["account"]),
  },
  methods: {
    //获取数据
    async getInfo() {
      this.loading = true;
      let res = {};
      if (this.searchForm.status == 0) {
        res = await reqGetReViewMainIng({ user: this.account });
      } else {
        res = await reqGetReViewMainEd({ user: this.account });
      }
      if (res.code == 0) {
        this.tableList = res.data;
        this.$modal.msgSuccess("查询成功");
      } else {
        this.$modal.msgError(res.msg);
      }
      this.loading = false;
    },
    //搜索
    // handleSearch(name) {
    //   this.getInfo(name);
    // },
    // //重置
    // handleReset() {
    //   this.searchForm = {};
    //   this.handleSearch();
    // },
    //审批
    handleAprove(row) {
      this.$router.push({
        name: "Approve",
        query: {
          resultId: row.resultId,
          deviceCode: row.deviceCode,
          seeFlag: this.searchForm.status == 0 ? false : true,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//表头颜色
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #f0f8ff !important;
}
//dialog
::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px;
}
::v-deep .el-card__body {
  padding: 10px 10px 10px 10px;
}
</style>